<template lang="pug">
div
    h1 this is the inner view
    //- the multiple true indicates that the upload component support multiple upload in browser, but the back end still process one multipart file at a once 
    a-upload(
        name="uploadfile"
        :multiple="true"
        action="http://localhost/xinthant/test/testUpload"
        :headers="headers"
        @change="handleChange")
        a-button 
            a-icon(type="upload")
            span Click to Upload      
</template>
<script>
export default {
  data() {
    return {
      headers: {
        authorization: 'authorization-text'
      }
    };
  },
  methods: {
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
};
</script>

<style scoped>

</style>